<template>
  <div>
    <h3>ref和$parent进行组件传参</h3>
    <p>子组件中的计数值: {{ counter }}</p>
    <Demo ref="refChild"></Demo>
    <el-button type="primary" @click="updateCounter">更新子组件计数值</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue'
import Demo from './Demo.vue'

let refChild = ref(null)
const counter = ref(0)
const parentData = ref('父组件数据')

onMounted(() => {
  counter.value = refChild.value.count
})

const updateCounter = () => {
  refChild.value.increment(20)
}

defineExpose({
  parentData,
})
</script>

<style scoped></style>
